<script setup lang="ts">
import TodoList from './components/TodoList.vue'
import TodoForm from './components/TodoForm.vue'
import TodoFilter from './components/TodoFilter.vue'
import useTodos from './composables/useTodos'
// import TodoFooter from './components/TodoFooter.vue'

// import TodoFooter from './components/TodoFooter.vue'

const {
  filteredTodos,
  filter,
  addTodo,
  toggleTodo,
  removeTodo,
  setFilter
} = useTodos()
</script>

<template>
  <div class="daima">
    <a href="https://gitee.com/state2023/vue" target="_blank">源代码</a>
  </div>
  <div class="todo-app">
    <h1>Todo List</h1>

    <TodoForm @add="addTodo" />
    <TodoFilter @filter="setFilter" />
    <TodoList :todos="filteredTodos" @toggle="toggleTodo" @remove="removeTodo" />
    <!-- <TodoFooter :count="activeCount" /> -->
  </div>

</template>

<style>
/* 保持原有样式不变 */
.todo-app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  /* background:rgb(246, 247, 246) */
   /* background:rgb(222, 243, 230)  */
   background: #fff;
}

.todo-list {
  list-style: none;
  padding: 0;
 
  
}

.todo-list li {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.completed {
  text-decoration: line-through;
  color: #888;
  color:rgb(236, 127, 94)
}

input[type="checkbox"] {
  margin-right: 10px;
}

button {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
   /* background:rgb(246, 247, 246) */
}

.filters {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  
}

.filters button {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  border-radius: 3px;
  
}

form {
  display: flex;
  margin-bottom: 20px;
}

form input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  
}

form button {
  padding: 8px 15px;
  margin-left: 10px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 3px;
}
</style>